<template>
  <div class="panel-body">
    <el-form inline>
      <el-form-item label="区间">
        <el-date-picker
          v-model="requestData.daterange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          :default-value="new Date()">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="图表名称">
        <el-input v-model="requestData.keyword"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="requestData.type">
          <el-option label="全部" value=""></el-option>
          <el-option label="异常" value="0"></el-option>
          <el-option label="成功" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" @click="fetchData">查询</el-button>
    </el-form>

    <el-card shadow="always">
      <table-view :table-data="tableData" :pageData="requestData" @handleCurrentChange='handleCurrentChange'
                  v-loading="loading">
        <template #execResult="data">
          <span><i
            :class="data.data.execResult?'el-icon-success':'el-icon-error'"></i>{{ data.data.execResult ? '成功' : '异常' }}</span>
        </template>
        <template #operation="data">
          <el-button size="mini" type="text" @click="show('execSql',data.data)">查看SQL</el-button>
        </template>
        <template #execMsg="data">
          <el-button size="mini" type="text" @click="show('execMsg',data.data)">
            {{ data.data.execResult ? '查询结果' : '异常信息' }}
          </el-button>
        </template>
      </table-view>
    </el-card>

    <form-dialog ref="showContentDiag" title="详情" v-slot:default="slotProps">
      <div class="panel" style="height: 500px;">
        <pre v-html="slotProps.data.content" style="height: 100%;overflow-y: auto"></pre>
      </div>
    </form-dialog>
  </div>
</template>

<script>
import {onMounted, reactive, toRefs} from "vue";
import tableView from '@/components/tableview';
import {getQueryLogList} from "@/api/queryLog";
import FormDialog from "@/components/formDialog";

export default {
  name: "queryLog",
  setup() {
    const state = reactive({
      requestData: {
        daterange: [new Date(), new Date()],
        keyword: '',
        type: '',
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      loading: false,
      tableData: {
        tableList: [],
        tableHeader: [{
          label: '序号',
          type: 'index',
          width: '50'
        }, {
          prop: 'workBookName',
          label: '图表名称'
        }, {
          prop: 'dashboardName',
          label: '分析名称'
        }, {
          prop: 'dataSourceName',
          label: '数据源'
        }, {
          prop: 'createTime',
          label: '创建时间'
        }, {
          prop: 'execTimes',
          label: '耗时(ms)'
        }, {
          type: 'slot',
          slotName: 'execResult',
          label: '状态'
        },
          {
            label: "执行sql",
            type: "slot",
            slotName: 'operation'
          }, {
            label: "返回信息",
            type: "slot",
            slotName: 'execMsg'
          }]
      }
    })

    const fetchData = async () => {
      state.loading = true;
      let resp = await getQueryLogList(state.requestData)
      state.tableData.tableList = resp.data.records
      state.requestData.total = resp.data.total
      state.loading = false;
    }

    const handleCurrentChange = (index) => {
      state.requestData.pageNum = index
      fetchData()
    }

    onMounted(fetchData)

    return {
      ...toRefs(state),
      fetchData,
      handleCurrentChange
    }
  },
  components: {
    FormDialog,
    tableView
  },
  methods: {
    show(item, data) {
      this.$refs.showContentDiag.open({content: data[item]})
    }
  }
}
</script>

<style scoped>
.el-icon-success {
  font-size: 18px;
  color: #67C23A;
}

.el-icon-error {
  font-size: 18px;
  color: #F56C6C;
}
</style>
